He tenido muchos problemas para evitar recibir la advertencia "Lista virtualizada: tiene una lista grande que tarda en actualizarse" al usar un componente <FlatList> con React-Native.

Ya investigué mucho y busqué en Google-Fu para probar una solución, pero ninguna de las soluciones ayudó, ni siquiera la solución en este problema de GitHub .

Cosas a tener en cuenta:

• Estoy usando shouldComponentUpdate() { return false; } en mi componente Elemento de lista, por lo que no se actualizan en absoluto.
• El componente que representa FlatList ya es un PureComponent
• Agregué console.logs en los métodos de procesamiento de mis componentes y puedo confirmar que no se vuelven a procesar.
• No estoy usando funciones anónimas, por lo que el componente renderItem no se reinicializa en cada llamada.

Importante : la advertencia solo parece ocurrir después de cambiar a una pestaña separada usando mi BottomTabNavigator y luego regresar y desplazarse por mi lista; pero esto es confuso porque cuando hago esto, el componente de pantalla FlatList no se vuelve a representar y tampoco los elementos de la lista. Dado que los componentes no se vuelven a renderizar cuando se navega a otra pestaña, ¿por qué sucedería este error?

Aquí está mi código exacto:

Aplicación.tsx

 const AppRoutes = [ { name: "Home", Component: HomeScreen }, { name: "Catalog", Component: CatalogScreen }, { name: "Cart", Component: CartScreen } ]; export const StoreApp = () => { return ( <NavigationContainer> <StatusBar barStyle="dark-content" /> <Tabs.Navigator> {AppRoutes.map((route, index) => <Tabs.Screen key={index} name={route.name} component={route.Component} options={{ headerShown: (route.name !== "Home") ?? false, tabBarIcon: props => <TabIcon icon={route.name} {...props} /> }} /> )} </Tabs.Navigator> </NavigationContainer> ); };

CatalogScreen.tsx

 import React from "react"; import { FlatList, SafeAreaView, Text, View, StyleSheet } from "react-native"; import { LoadingSpinnerOverlay } from "../components/LoadingSpinnerOverlay"; import { getAllProducts, ProductListData } from "../api/catalog"; class ProductItem extends React.Component<{ item: ProductListData }> { shouldComponentUpdate() { return false; } render() { return ( <View> {console.log(`Rendered ${this.props.item.name}-${Math.random()}`)} <Text style={{height: 100}}>{this.props.item.name}</Text> </View> ); } } export class CatalogScreen extends React.PureComponent { state = { productData: [] }; componentDidMount() { getAllProducts() .then(response => { this.setState({ productData: response.data }); }) .catch(err => { console.log(err); }); } private renderItem = (props: any) => <ProductItem {...props} />; private keyExtractor = (product: any) => `${product.id}`; private listItemLayout = (data: any, index: number) => ({ length: 100, offset: 100 * index, index }); render() { const { productData } = this.state; console.log("CATALOG RENDERED"); return ( <SafeAreaView style={styles.pageView}> {!productData.length && <LoadingSpinnerOverlay text="Loading products..." />} <View style={{backgroundColor: "red", height: "50%"}}> <FlatList data={productData} removeClippedSubviews keyExtractor={this.keyExtractor} renderItem={this.renderItem} getItemLayout={this.listItemLayout} /> </View> </SafeAreaView> ); } }; const styles = StyleSheet.create({ pageView: { height: "100%", position: "relative", } });

Dado que mis componentes y listas están optimizados y sigo recibiendo el error, estoy empezando a creer que esto puede ser un problema real con React Native, pero si alguien puede ver lo que estoy haciendo mal o alguna solución alternativa, esto sería de gran ayuda!

Hallazgos adicionales: encontré que la advertencia ya no ocurre si el componente CatalogScreen está contenido dentro de un NativeStackNavigator con una sola pantalla. Creo que esto puede indicar que se trata de un problema con el módulo BottomTabNavigator .

Por ejemplo, ya no aparece ninguna advertencia si realizo los siguientes cambios:

Aplicación.tsx

 const AppRoutes = [ { name: "Home", Component: HomeScreen }, { name: "Catalog", Component: CatalogPage }, // Changed CatalogScreen to CatalogPage { name: "Cart", Component: CartScreen } ];

CatalogScreen.tsx

 const Stack = createNativeStackNavigator(); export class CatalogPage extends React.PureComponent { render() { return ( <Stack.Navigator> <Stack.Screen name="CatalogStack" options={{ headerShown: false }} component={CatalogScreen} /> </Stack.Navigator> ); } }

Con esta solución alternativa, renderizo el componente Stack Navigation en lugar del componente CatalogScreen directamente. Esto resuelve el problema, pero no entiendo por qué esto haría una diferencia. ¿React Native maneja los objetos de memoria de manera diferente en las pantallas de Stack Navigation en comparación con las pantallas de BottomTabNavigator?